<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition>
	<p:tab title="Hotels">
		<h:form>
			<h:panelGrid columns="2">
				<h:panelGrid columns="2">
					<p:outputLabel for="location" value="Location: " />
					<p:selectOneMenu id="location"
						value="#{dropdownViewHotels.hotel.location}" style="width:150px">
						<p:ajax update="hotel"
							listener="#{dropdownViewHotels.onLocationChange}" />
						<p:ajax update="message"
							listener="#{dropdownViewHotels.changeMessage}" />
						<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
						<f:selectItems value="#{dropdownViewHotels.locations}" />
					</p:selectOneMenu>

					<p:outputLabel for="hotel" value="Hotel: " />
					<p:selectOneMenu id="hotel"
						value="#{dropdownViewHotels.hotel.name}" style="width:150px">
						<p:ajax update="message"
							listener="#{dropdownViewHotels.changeMessage}" />
						<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
						<f:selectItems value="#{dropdownViewHotels.hotels}" />
					</p:selectOneMenu>

					<p:outputLabel for="roomType" value="Room Type " />
					<p:selectOneMenu id="roomType"
						value="#{dropdownViewHotels.hotel.roomType}" style="width:150px">
						<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
						<f:selectItems value="#{dropdownViewHotels.roomTypes}" />
					</p:selectOneMenu>

					<p:outputLabel for="hotelStart" value="Start date:" />
					<p:calendar id="hotelStart"
						value="#{dropdownViewHotels.hotel.start}">
					</p:calendar>

					<p:outputLabel for="hotelEnd" value="End date:" />
					<p:calendar id="hotelEnd" value="#{dropdownViewHotels.hotel.end}">
						<p:ajax event="dateSelect" listener="#{dropdownViewHotels.changePrice}" update="hotelFinalPrice" />
					</p:calendar>

				</h:panelGrid>
				<h:dataTable id="message" border="2"
					value="#{dropdownViewHotels.details}" var="list">

					<h:column>
						<f:facet name="hotelName">Name</f:facet>
    				#{list.name}
    			</h:column>

					<h:column>
						<f:facet name="hotelLocation">Location</f:facet>
    				#{list.location}
    			</h:column>

					<h:column>
						<f:facet name="hotelDayType">Day Type</f:facet>
    				#{list.dayType}
    			</h:column>

					<h:column>
						<f:facet name="hotelRoomType">Room Type</f:facet>
    				#{list.roomType}
    			</h:column>

					<h:column>
						<f:facet name="hotelPrice">Price</f:facet>
    				#{list.price}
    			</h:column>

				</h:dataTable>
				
				<p:outputLabel for="hotelFinalPrice" value="Total:" />
				<h:outputText id="hotelFinalPrice"
					value="#{dropdownViewHotels.price}" />
			</h:panelGrid>



		</h:form>
	</p:tab>

</ui:composition>
</html>